<template>
	<el-dialog :show-close="false" v-model="props.modelValue" width="800px"  :close-on-click-modal="false" :close-on-press-escape="false" draggable destroy-on-close>
		<div class="content">
			<div class="title">记录一下此刻的情绪吧</div>
			<div class="flex row">
				<div class="key">当下的情绪</div>
				<div class="right">
					<el-radio-group v-model="selectEmotion">
						<el-radio v-for="item in emotion" :value="item.value" :label="item.key" :key="item.value">{{item.key}}</el-radio>
					</el-radio-group>
					<div class="desc">*请选择当前最符合的情绪分类</div>
				</div>
			</div>
			<div class="flex row">
				<div class="key">这种情绪强烈吗?</div>
				<div class="right">
					<div class="flex-aic flex-ju-sb value-desc">
						<div>不强烈</div>
						<div>非常强烈</div>
					</div>
					<div class="emojis">
						<div class="emoji-item" v-for="(item, index) in emojis">
							<img :src="emotionStrength === index ? item[1] : item[0]" @click="emotionStrength = index"/>
							<span class="value">{{index}}</span>
						</div>
					</div>
					<div class="desc">*请用0到9的一个数字来表达当前这种情绪强烈程度，0分表示不强烈，9分表示非常强烈。</div>
				</div>
			</div>

			<div class="flex row">
				<div class="key">现在心情愉悦吗?</div>
				<div class="right">
					<div class="flex-aic flex-ju-sb value-desc">
						<div>非常不愉悦</div>
						<div>非常愉悦</div>
					</div>
					<div class="emojis">
						<div class="emoji-item" v-for="(item, index) in emojis">
							<img :src="emotionPleasure === index ? item[1] : item[0]" @click="emotionPleasure = index"/>
							<span class="value">{{index}}</span>
						</div>
					</div>
					<div class="desc">*请用0到9的一个数字来表达当前这种情绪强烈程度，0分表示不强烈，9分表示非常强烈。</div>
				</div>
			</div>

			<div class="flex-center" style="margin-top: 32px;">
				<el-button type="primary" @click="next">提交并进入下一题</el-button>
			</div>
		</div>
	</el-dialog>
</template>
<script setup>
import {defineProps, defineEmits, ref, onUnmounted} from 'vue';
import { ElMessage } from 'element-plus';
import { useJsonUploader } from '@/hooks/useJsonUploader';
import useTaskStore from '@/stores/task.js'
import  useUserStore  from '@/stores/user'
const taskStore = useTaskStore()
const userStore = useUserStore()
const props = defineProps({
	modelValue: {
		type: Boolean,
		default: false
	},
  task: {
    type: Object,
    default: () => ({})
  },
  jsonName: String,
  uploadFolder: String
})
const emits = defineEmits(['update:modelValue']);

// 使用JSON上传hooks
const { uploadJson } = useJsonUploader({
  uploadFolder: props.uploadFolder,
  jsonName: props.jsonName
});

const next = async ()=> {
	// 验证必填项
	if (!selectEmotion.value) {
		ElMessage.warning('请选择当下的情绪')
		return
	}
	if (emotionStrength.value === '') {
		ElMessage.warning('请选择情绪强烈程度')
		return
	}
	if (emotionPleasure.value === '') {
		ElMessage.warning('请选择心情愉悦程度')
		return
	}
	
	const jsonData = {
    "情绪": selectEmotion.value,
    "情绪强烈程度": emotionStrength.value,
    "情绪愉悦程度": emotionPleasure.value,
    taskId: props.task.id,
    timestamp: Date.now(),
    userId: userStore.userInfo.data.userId,
    account: userStore.userInfo.data.account,
    taskType: props.task.type
  }

	// 上传JSON数据到腾讯云存储桶
	const uploadResult = await uploadJson(jsonData);
	if (uploadResult.success) {
		ElMessage.success('数据提交成功');
    taskStore.taskIndex += 1
		emits('update:modelValue', false)
	} else {
		ElMessage.error('数据提交失败，请重试');
		return;
	}
}

//情绪分类
const emotion = ref([
	{key: '快乐', value: 1},
	{key: '悲伤', value: 2},
	{key: '愤怒', value: 3},
	{key: '恐惧', value: 4},
	{key: '平静', value: 5},
	{key: '厌恶', value: 6}
])
//选中的情绪分类
const selectEmotion = ref('')

//表情图片列表
const emojis = ref([
	['https://duomotai-1302957431.cos.ap-chongqing.myqcloud.com/icon/0.png', 'https://duomotai-1302957431.cos.ap-chongqing.myqcloud.com/icon/0-active.png'],
	['https://duomotai-1302957431.cos.ap-chongqing.myqcloud.com/icon/1.png', 'https://duomotai-1302957431.cos.ap-chongqing.myqcloud.com/icon/1-active.png'],
	['https://duomotai-1302957431.cos.ap-chongqing.myqcloud.com/icon/2.png', 'https://duomotai-1302957431.cos.ap-chongqing.myqcloud.com/icon/2-active.png'],
	['https://duomotai-1302957431.cos.ap-chongqing.myqcloud.com/icon/3.png', 'https://duomotai-1302957431.cos.ap-chongqing.myqcloud.com/icon/3-active.png'],
	['https://duomotai-1302957431.cos.ap-chongqing.myqcloud.com/icon/4.png', 'https://duomotai-1302957431.cos.ap-chongqing.myqcloud.com/icon/4-active.png'],
	['https://duomotai-1302957431.cos.ap-chongqing.myqcloud.com/icon/5.png', 'https://duomotai-1302957431.cos.ap-chongqing.myqcloud.com/icon/5-active.png'],
	['https://duomotai-1302957431.cos.ap-chongqing.myqcloud.com/icon/6.png', 'https://duomotai-1302957431.cos.ap-chongqing.myqcloud.com/icon/6-active.png'],
	['https://duomotai-1302957431.cos.ap-chongqing.myqcloud.com/icon/7.png', 'https://duomotai-1302957431.cos.ap-chongqing.myqcloud.com/icon/7-active.png'],
	['https://duomotai-1302957431.cos.ap-chongqing.myqcloud.com/icon/8.png', 'https://duomotai-1302957431.cos.ap-chongqing.myqcloud.com/icon/8-active.png'],
	['https://duomotai-1302957431.cos.ap-chongqing.myqcloud.com/icon/9.png', 'https://duomotai-1302957431.cos.ap-chongqing.myqcloud.com/icon/9-active.png'],
])

//情绪强烈程度
const emotionStrength = ref('')
//情绪愉悦程度
const emotionPleasure = ref('')

// 组件卸载时清理资源
onUnmounted(() => {
  // 清理响应式数据
  selectEmotion.value = ''
  emotionStrength.value = ''
  emotionPleasure.value = ''
})


</script>
<style scoped lang="scss">
.title{
  font-size: 0.24rem;
  margin-bottom: .24rem;
}
.row{
  align-items: flex-start;
  padding-bottom: .2rem;
  &:not(:last-child){
    border-bottom: 1px solid #DCDCDC;
  }
  .key{
    font-size: 0.16rem;
    line-height: 0.32rem;
    width: 1.4rem;
  }
  .right{
    flex: 1;
    .desc, .value-desc{
      color: #666666;
      font-size: 0.14rem;
    }
    .desc{
      margin-top: 0.16rem;
    }

    .value-desc{
      line-height: 0.32rem;
    }
    .emojis{
      display: flex;
      justify-content: space-between;
      .emoji-item{
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
        img{
          width: .5rem;
          height: .5rem;
        }
      }
    }
  }
}

</style>
<style>

</style>